<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>源码智慧校园</title>
    <!-- 设置页面图标 -->
<link rel="shortcut icon" href="../asserts/images/logo_small.jpg">
<!-- 引入bootstrap和bootstrap-icons的css -->
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
<!-- 引入自己页面的css -->
<link rel="stylesheet" href="../asserts/css/index.css">
<!-- 引入jquery和bootstrap的js -->
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <header class="container-fiuld border-bottom border-5 bg-light" style=height:80px > 
  <div class="container h-100 d-flex justify-content-between align-items-center" >
    <!-- 中间左边 -->
     <div class="d-flex align-items-center justify-content-between "  >
        <img src="../asserts/images/logo_small.jpg" alt="log" style="height: 60px;">
        <div class="fs-4  ms-3 ">源码智慧校园</div>
     </div>
     <!-- 中间右边 -->
     <div class="d-flex justify-content-between align-items-center">
          <img src="../asserts/images/head.jpg" alt="log" style="height: 50px;">
          <div class="m-3">
            <div class="dropdown">
                <button type="button" class="btn   dropdown-toggle" data-bs-toggle="dropdown">
                  张三
                </button>
                <ul class="dropdown-menu ">
                  <li><a class="dropdown-item" href="#">链接 1</a></li>
                  <li><a class="dropdown-item" href="#">链接 2</a></li>
                  <li><a class="dropdown-item" href="#">链接 3</a></li>
                </ul>
              </div>
          </div>
     </div>
  </div>
    </header>
    <main >
        <!-- 总共大的 -->
      <div class="row " >
          <!-- 左边的小的大概占了3 -->
          <div class="col-md-3 border-end  border-3 " style="min-height: 100vh;" >
            <ul class="nav flex-column d-flex align-items-center nav-underline fs-5">
                <div class=" border-bottom border-2 d-flex justify-content-center ms-2" style="width: 100%;" >
                <li class="nav-item ">
                  <a class="nav-link " aria-current="page" href="#">首页</a>
                </li>
            </div>
            <div class=" border-bottom border-2 d-flex justify-content-center  ms-2"  style="width: 100%;">
                <li class="nav-item ">
                  <a class="nav-link" href="teacher.html">教室信息管理</a>
                </li>
            </div>
            <div class=" border-bottom border-2 d-flex justify-content-center  ms-2 "  style="width: 100%;">
                <li class="nav-item ">
                  <a class="nav-link" href="student.html">学生信息管理</a>
                </li>
            </div>
              </ul>
          </div>
             <!-- 右边的小的大概占了9 -->
          <div class="col-md-9 ">
             <!-- 右边上面一个div -->
             <div class="row my-2">
                <div class="card col bg-primary mx-2 " >
                    <div class="card-body">
                     <p>今日访问量</p>
                     <h5>1327</h5>
                    </div>
             </div>
             <div class="card col bg-warning mx-2" >
                <div class="card-body">
                 <p>今日访问量</p>
                 <h5>1327</h5>
                </div>
         </div>
         <div class="card col bg-success mx-2" >
            <div class="card-body">
             <p>今日访问量</p>
             <h5>1327</h5>
            </div>
     </div>
     <div class="card col bg-info mx-2" >
        <div class="card-body">
         <p>今日访问量</p>
         <h5>1327</h5>
        </div>
 </div>
          </div>
          <div style="height:300px;">
            <img src="../asserts/images/zhxy.png" height="100%" width="100%" walt="log">
          </div>
      </div>
    </main>
</body>
</html>